<template>
  <basic-container>
    <el-form ref="form" :model="formInline" label-width="100px" style="width:50%;" :rules="rules">
      <h3>福利获取区域</h3>
      <el-form-item label="活动海报">
        <el-upload
          class="avatar-uploader"
          action="api/updateFile/uploadFilePhoto"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="submitImage"
          :headers="headers"
          :data="submitData"
          multiple
        >
          <el-button size="small">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
       <el-form-item label="活动内容">
        <el-input v-model="formInline.content" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="报名时间">
        <el-date-picker v-model="formInline.signTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" prop="endTime">
        <el-date-picker v-model="formInline.deadLine" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="formInline.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="formInline.endTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="活动票据" prop="actTicket">
        <!-- <el-input v-model="formInline.actTicket"></el-input> -->
        <div >
          <el-button type="primary" @click="add">新增</el-button>
          <div v-for="(item, index) in formInline.activityTicket" :key="index" style="margin-top: 15px">
            <el-input v-model="item.ticketName" style="width: 27%; margin-right: 5px" maxlength='8' placeholder="名称，最多8个字"></el-input>
            <el-input v-model="item.price" style="width:27%; margin-right: 5px" maxlength='8' placeholder="价格"></el-input>
            <el-input v-model="item.count" style="width: 27%; margin-right: 5px" maxlength='8' placeholder="数量"></el-input>
            <el-button type="danger" style="width: 10%; " @click="delInput(item, index)">删除</el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="活动地址" prop="adress">
        <el-input v-model="formInline.adress"></el-input>
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="formInline.x"></el-input>
      </el-form-item>
      <el-form-item label="纬度">
        <el-input v-model="formInline.y"></el-input>
      </el-form-item>
      <el-form-item>
        <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
  <bm-view class="map"></bm-view>
  <bm-control :offset="{width: '10px', height: '10px'}">
    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
      <el-input placeholder="请输入地名关键字" v-model="search"></el-input> <!-- 这里指代一个自定义搜索框组件 -->
    </bm-auto-complete>
  </bm-control>
  <bm-geolocation @locationSuccess = 'locationSuccess' anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
  <bm-local-search :keyword="keyword" :auto-viewport="true"  @searchcomplete="searchcomplete"></bm-local-search>
</baidu-map>
        <!-- <baidu-map class="map" :center="circlePath.center" :zoom="15" :scroll-wheel-zoom="true">
          <bm-circle
            :center="circlePath.center"
            :radius="circlePath.radius"
            stroke-color="blue"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            @lineupdate="updateCirclePath"
            :editing="true"
          ></bm-circle>
        </baidu-map> -->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$router.push({path: '/monitor/activity'})">取消</el-button>
      </el-form-item>
    </el-form>
  </basic-container>
</template>

<script>
import {delTicket, gteDetail, submitScope } from "@/api/course/courseDetail";
import { getToken } from "@/util/auth";
import { uploadFilePhoto } from "@/api/course/uploadFilePhoto";
export default {
  data() {
    return {
      myId: '',
      search: '',
      keyword: '',
      formInline: {
        activityTicket: [
          {
            "count": '',
            "price": '',
            "remianCount": '',
            "ticketName": ''
          }
        ],
        content: '',
        startTime: '',
        endTime: '',
        logo: "",
        name: "",
        signTime: "",
        endTime: "",
        deadLine: '',
        createTime: "",
        startTime: "",
        actTicket: "",
        adress: "",
        x: '',
        y: '',
        scope: ""
      },
      headers: {
        Authorization: `Basic c3dvcmQ6c3dvcmRfc2VjcmV0`,
        "Blade-Auth": "bearer " + getToken(),
        "Content-Type": "multipart/form-data"
      },
      submitData: {
        type: 4
      },
      rules: {
        // logo: [
        //   {
        //     required: "true",
        //     message: "请上传海报图片",
        //     trigger: "change"
        //   }
        // ],
        // name: [
        //   {
        //     required: "true",
        //     message: "请输入活动名称",
        //     trigger: "blur"
        //   },
        //   { min: 2, max: 64, message: "长度在 2 到 64 个字符", trigger: "blur" }
        // ],
        // signUptime: [
        //   {
        //     required: "true",
        //     message: "请选择报名时间",
        //     trigger: "change"
        //   }
        // ]
      },
      cash: false,
      chit: false,
      circlePath: {
        center: {
          lng: 0,
          lat: 0
        },
        radius: 0
      }
    };
  },
  created() {
    if (this.$route.query.id) {
      gteDetail(this.$route.query.id).then(res => {
            this.myId = res.data.data.id;
            this.formInline = res.data.data;
          });
    }
  },
  methods: {
    delInput(item, index) {
      
      if (index === 0) return false;
       if (this.myId) {
         delTicket(item.id).then(res => {
            // this.myId = res.data.id;
            // this.formInline = res.data.data;
          });
      }
      this.formInline.activityTicket.splice(index, 1);
     
    },
    add() {
      this.formInline.activityTicket.push(
         {
            "count": '',
            "price": '',
            "remianCount": '',
            "ticketName": ''
          }
      )
    },
    locationSuccess(e) {
      console.log(e);
      this.formInline.x = e.point.lat;
      this.formInline.y = e.point.lng;
      this.formInline.adress = e.addressComponent.province + e.addressComponent.city;
    },
    searchcomplete(e) {
      // console.log(e.Ar[0].point.lat);lng
      this.formInline.x = e.Ar[0].point.lat;
      this.formInline.y = e.Ar[0].point.lng;
      this.formInline.adress = e.Ar[0].address;
      // this.circlePath.center = e.target.getCenter();
      // this.circlePath.radius = e.target.getRadius();
    },
    submitImage(content) {
      let formData = new FormData();
      console.log(content.file);
      formData.append("file", content.file);
      formData.append("type", 1);
      console.log(formData);
      uploadFilePhoto(formData).then(res => {
        console.log(res);
        console.log("上传图片");
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);

      console.log(res);
      if (res.code != 200) {
        this.$message({
          message: res.msg,
          type: "error"
        });
      } else {
        this.$message({
          message: res.msg,
          type: "success"
        });
        this.onLoad(this.page);
      }
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "png";
      const extension2 = testmsg === "jpg";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "error"
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 5MB!",
          type: "error"
        });
      }
      return extension || (extension2 && isLt2M);
    },
    onSubmit() {
      this.formInline.photoId = 1;
      submitScope(this.formInline).then(res => {
        this.$message({
          message: "操作成功",
          type: "success"
        });
        this.$router.push({ path: "/monitor/activity" });
      });
    }
  }
};
</script>

<style>
.map {
  width: 700px;
  height: 300px;
}
</style>
